<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="preset-log">
    <div class="con-title">
      <span>安全保密基线展示</span>
    </div>
    <div class="container-box">
      <div class="page-container" style="overflow: hidden">
        <!-- 左侧 -->
        <SafeBaselineFilter ref="commonFilterRef" :tree="treeData" @emitSel="getSel" @handleReset="handleResetFilter" />
        <div class="right-container log-right">
          <hk-table
            ref="tableRef"
            :loading="loading"
            :table-data="tableData"
            :table-columns="tableList"
            :show-index="true"
            :total="total"
            :table-height="80"
            :query-params="queryParams"
            @changePage="getList">
            <template #details="scope">
              <div v-if="scope.row.details && scope.row.details.length > 0">
                <template v-if="scope.row.details.length<4">
                  <span v-for="(item, index) in scope.row.details" :key="index">
                    {{ item }}<span v-if="index!=scope.row.details.length-1">,</span>
                  </span>
                </template>
                <template v-else>
                  <span v-for="(item, index) in scope.row.details.slice(0,4)" :key="index">
                    {{ item }}<span v-if="index!=3">,</span>
                  </span>
                  <span>...</span>
                </template>
              </div>
              <span v-else>-</span>
            </template>
          </hk-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table'
import SafeBaselineFilter from './SafeBaselineFilter.vue'
import { baseline, baselineType } from '@/api/entityPortrait'
import { parseTime } from '@/utils/hongke'

export default {
  components: { HkTable, SafeBaselineFilter },
  props: {
    ip: {
      type: String,
      default: '',
    },
  },
  watch: {
    ip: {
      handler(newValue) {
        if (newValue) {
          this.getList()
        }
      },
      immediate: false,
      deep: true,
    },
  },
  data() {
    return {
      formInline: {
        keyword: this.$route.query.ip || this.$store.state.portrait.assetsObj.equipmentIp,
        region: '',
        time: '',
        highSearchParams: [],
      },
      dictOptions: {
        symbolsTypeOptions: [],
        researchSearchFiledOptions: [],
        researchTypeOptions: [],
      },
      showHighSearch: false,
      // 树形组件
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
      },
      tableList: [
        { label: '基线类型', param: 'modelName' },
        { label: '基线名称', param: 'baselineName' },
        { label: '基线详情', param: 'details', type: 'slot' },
        { label: '最后执行时间', param: 'time', width: 300 },
        { label: '统计周期', param: 'cycle' },
        // { label: '基线迭代周期', param: 'source_app_type' },
      ],
      activeName: 'second',
      detailData: {},
      checkList: [],
      currentGid: '',
      query: {},
      baselineType: [],
    }
  },
  mounted() {
    setTimeout(() => {
      this.getLeftTree()
      this.getList()
    }, 500)
  },
  methods: {
    /** 获取列表数据 */
    getList() {
      this.loading = true
      baseline({ ...this.queryParams, ip: this.ip, baselineType: this.baselineType }).then((res) => {
        this.loading = false
        this.tableData = res.list ? res.list : []
        console.log(126,this.tableData);
        this.total = res.total ? res.total : 0
      })
    },
    /** 高级查询 */
    handleTiggleSearch() {
      this.showHighSearch = !this.showHighSearch
      if (this.showHighSearch && this.formInline.highSearchParams.length == 0) {
        this.formInline.highSearchParams.push({ andOr: '', field: '', custom: '', symbols: '', value: '' })
      }
      if (!this.showHighSearch) {
        this.formInline.highSearchParams = []
      }
    },

    /** 左侧树重置    */
    handleResetFilter() {
      this.baselineType=[];
      this.getLeftTree();
      this.getList()
    },

    /** file触发事件*/
    handleFile(value, item, index) {
      if (this.formInline.highSearchParams[index]?.value) {
        this.formInline.highSearchParams[index].value = ''
      }
    },
    /** 分页 */
    handChangePage(data) {
      this.queryParams.current = data.page || data.current
      this.queryParams.size = data.limit || data.size
      this.getList()
    },

    /** 获取左侧树的数据 */
    getLeftTree() {
      baselineType().then((res) => {
        let treeData = res
        this.setData(treeData)
      })
    },
    // 设置左侧的值
    setData(data) {
      this.treeData = []
      let keys = Object.keys(data)
      if (keys && keys.length > 0) {
        keys.forEach((i) => {
          this.treeData.push({
            showchild: false,
            groupName: i,
            children: data[i],
          })
        })
      }
    },
    /** 左侧树点击事件 */
    getSel(data) {
      this.baselineType = data
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px !important;
}

.el-form-item-radius {
  ::v-deep .el-form-item__content {
    display: flex !important;
    align-items: flex-start !important;
  }
}

.demo-form-inline {
  flex-wrap: wrap;

  .container-search-row {
    .search-form-item {
      width: 15%;
      margin-right: 10px;
    }

    &.high-search-row {
      padding: 10px;
      background: #f3f5fc;
      border-top: 1px solid #4b6eef;
      position: relative;

      &::before {
        display: inline-block;
        content: '';
        position: absolute;
        width: 10px;
        border-bottom: 6px solid #4b6eef;
        border-top: 6px solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        top: -13px;
        left: 5%;
      }
    }

    width: 100%;

    .el-col {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
    }

    .data-picker-radius {
      border-left: 0 !important;
      border-radius: 0 4px 4px 0 !important;
    }
  }
}

.preset-log {
  padding: 0;
  background: #fff;
  .con-title {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    padding: 0 20px;
  }
  .page-container {
    align-items: stretch;
  }

  .el-form {
    display: flex;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .container-box {
    height: 600px;
    overflow: hidden;

    .container-search {
      padding: 0 15px 15px;
      background: #fff;
    }
  }

  .left-container {
    height: 100%;
    overflow: auto;
    border-top: 0px !important;
  }

  // 跳转的部分
  .m-container {
    width: 100%;
    height: 100%;
    background: #e5ecf6;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    // 头部
    .m-header {
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
      margin-bottom: 10px;
    }

    // 线
    .header-line {
      width: 100%;
      height: 38px;
      line-height: 38px;
      padding: 0 8px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
    }

    .filter-source {
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .drawmain {
      padding: 0 16px 10px 16px;

      .addSearchParam-container {
        max-height: 265px;
        height: 100%;
        overflow: auto;

        .one-level-search-content {
          position: relative;
          padding-left: 40px;
          padding-bottom: 4px;

          .change-one-level-btn {
            position: absolute;
            left: 0;
            top: calc(50% - 6px);
            z-index: 3;
            padding: 0;
            width: 24px;
            height: 24px;
            color: #2979ff;
            border: none;
            background: #edf5ff;
            border-radius: 2px;
          }

          .addSearchParam {
            width: 100%;
            margin-bottom: 8px;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 20%;
            background-color: #f8f9fc;
            border: 1px solid #f0f0f0;

            &::after {
              content: '';
              position: absolute;
              top: -11px;
              left: -29px;
              bottom: -11px;
              border-left: 1px solid #cfe4fe;
            }

            .content {
              flex: 1;
              overflow-y: auto;
              display: flex;
              padding: 16px;
              justify-content: space-between;
              align-items: end;

              & > div {
                width: 60%;
                height: 100%;
                overflow-y: auto;
              }

              .searchContent {
                display: table;
                max-height: 93%;
                position: relative;
                padding-left: 29px;
              }

              .add-btn {
                padding-left: 10px;
              }
            }
          }
        }
      }
    }
  }

  .params-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: -4px;
      left: -15px;
      bottom: -15px;
      border-left: 1px solid #cfe4fe;
    }

    .params-input {
      margin-right: 8px;
    }
  }

  .add-search-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
  }

  .l-container {
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .total {
      padding: 8px;
      font-size: 14px;
    }
  }
}
.el-tabs {
  height: 100%;
}
::v-deep .el-tabs__nav-wrap::after {
  background: transparent !important;
}
::v-deep {
  .el-tabs {
    display: flex;
    flex-direction: column;
    .el-tabs__content {
      flex: 1;
      .el-tab-pane {
        height: 100%;
        .targetTable {
          height: 100%;
        }
      }
    }
  }
}
</style>
